import React from 'react'
import type { ColumnsType } from 'antd/es/table';
import {Table, Tag, Button} from 'antd';

export default function GoodsCom() {

  //1. 定义单条数据的接口
  interface GoodsItem {
    remote_img: string;
    title: string;
    price: string;
    shop: string;
    url: string;
    isZY: boolean;
    img: string;
    id: number;
  }

  //2. 定义表格的结构
  let columns:ColumnsType<GoodsItem> = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '商品名称',
      dataIndex: 'title'
    },
    {
      title: '图片',
      dataIndex: 'remote_img',
      render: v => {
        return <img width="60" src={v} alt="" />
      }
    },
    {
      title: '价格',
      dataIndex: 'price',
      render: v => {
        return '￥' + v
      }
    },
    {
      title: '是否自营',
      //如果使用 record 第二个参数获取结果, 则 dataIndex 属性可以不用编写
      render: (v, record) => {
        return record.isZY && <Tag color="#f50">自营</Tag>
      }
    },
    {
      title: '操作',
      width: 200,
      fixed: 'right',
      render: () => {
        return <><Button>修改</Button><Button>删除</Button></>
      }
    }
  ];

  //3. 准备要渲染的数据
  let data: GoodsItem[] = [
    {
      "remote_img": "http://img14.360buyimg.com/n7/jfs/t1/190177/5/20205/91340/612dc9d1Ea57ded86/53a5e2d24dabf32d.jpg",
      "title": "一加 OnePlus 9 Pro 5G旗舰2K+120Hz 柔性屏12GB+256GB 绿洲 骁龙888 65W快充 哈苏专业模式 超广角拍照手机",
      "price": "5499.00",
      "shop": "一加手机京东自营官方旗舰店",
      "url": "https://item.jd.com/100019141914.html",
      "isZY": true,
      "img": "/images/goods/53a5e2d24dabf32d.jpg",
      "id": 1
    },
    {
      "remote_img": "http://img13.360buyimg.com/n7/jfs/t1/189261/39/3773/121751/60a269ecE4cd8a070/df2735c6ee1a895a.jpg",
      "title": "荣耀Play5T 22.5W超级快充 5000mAh大电池 6.5英寸护眼屏 全网通8GB+128GB极光蓝",
      "price": "1189.00",
      "shop": "荣耀京东自营旗舰店",
      "url": "https://item.jd.com/100021830458.html",
      "isZY": true,
      "img": "/images/goods/df2735c6ee1a895a.jpg",
      "id": 2
    },
    {
      "remote_img": "http://img13.360buyimg.com/n7/jfs/t1/198525/38/8395/144282/6140705bE7dd39929/e805d8c02b7e1f3b.jpg",
      "title": "Redmi Note 9 4G 6000mAh大电池 骁龙662处理器  18W快充 羽墨黑 6GB+128GB 智能手机 小米 红米",
      "price": "999.00",
      "shop": "小米京东自营旗舰店",
      "url": "https://item.jd.com/100016784108.html",
      "isZY": false,
      "img": "/images/goods/e805d8c02b7e1f3b.jpg",
      "id": 3
    },
    {
      "remote_img": "http://img11.360buyimg.com/n7/jfs/t1/186256/6/554/135561/6082904aE2a61d056/c921c551039621d0.jpg",
      "title": "荣耀畅玩20 5000mAh超大电池续航 6.5英寸大屏  莱茵护眼 4GB+128GB 极光蓝 双卡双待 全网通",
      "price": "889.00",
      "shop": "荣耀京东自营旗舰店",
      "url": "https://item.jd.com/100011186161.html",
      "isZY": false,
      "img": "/images/goods/c921c551039621d0.jpg",
      "id": 4
    },
    {
      "remote_img": "http://img13.360buyimg.com/n7/jfs/t1/200673/15/4432/202879/612ddc90Ec08afda5/9ef1faa1babfcf31.jpg",
      "title": "Redmi 9A 5000mAh大电量 1300万AI相机 八核处理器 人脸解锁 4GB+64GB 晴空蓝 游戏智能手机 小米 红米",
      "price": "599.00",
      "shop": "小米京东自营旗舰店",
      "url": "https://item.jd.com/100014348478.html",
      "isZY": true,
      "img": "/images/goods/9ef1faa1babfcf31.jpg",
      "id": 5
    }
  ];

  return (
    // 4. 使用 Table 组件, 并传入相关的数据
    <Table 
      dataSource={data} 
      columns={columns}
      rowKey={'id'}
      bordered
      scroll={{x: 1500}}
      pagination={{
        position: ['bottomLeft'],
        total:50,
        defaultPageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: [2, 5, 10, 20],
        showTotal: (total) => {
          return '数据总数为' + total + '条';
        }
      }}
     />
  )
}
